<template>
	<div class="spread con">
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/order' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>已完成订单列表</el-breadcrumb-item>
		</el-breadcrumb>
		<span>订单号:</span>
<el-input v-model="keyword" placeholder="请输入订单号" style="width:20%"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>
		
		<el-table
		    :data="tableData"
		    style="width: 100%">
		    
		    <el-table-column
		      label="订单号"
		      width="220">
		      	<template slot-scope="scope">
		        	<span style="margin-left: 10px">{{ scope.row.order_sn }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="订单数量"
		      width="100">
		      	<template slot-scope="scope">
		        	<span style="margin-left: 10px">{{ scope.row.total_num }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="订单金额"
		      width="110">
		      	<template slot-scope="scope">
		        	<span style="margin-left: 10px">{{ Math.round(scope.row.totalmoney) }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="创建时间"
		      width="200">
		      <template slot-scope="scope">
		        <i class="el-icon-time"></i>
		        <span style="margin-left: 10px">{{ scope.row.create_time}}</span>
		      </template>
		    </el-table-column>

		    <el-table-column
		      label="客户名称"
		      width="100">
		      	<template slot-scope="scope">
		        	<span style="margin-left: 10px">{{ scope.row.customer }}</span>
		      	</template>
		    </el-table-column>

		    <el-table-column
		      label="客户代码"
		      width="100">
		      	<template slot-scope="scope">
		        	<span style="margin-left: 10px">{{ scope.row.customer_sn }}</span>
		      	</template>
		    </el-table-column>

		    <el-table-column
		      label="订单状态"
		      width="100">
		      	<template slot-scope="scope">
		      		<el-tag type="danger" v-if="scope.row.order_status == 0">待发货</el-tag>
		      		<el-tag type="warning" v-else-if="scope.row.order_status == 1">已发货</el-tag>
		      		<el-tag type="success is-round" v-else>已完成</el-tag>
		      	</template>
		    </el-table-column>
		  </el-table>
		  
		  <div class="block el-pagination" style="margin-top: 50px;"> 
 			<span class="el-pagination__total" style="margin-left: 20px;">共 {{page.total}} 条数据</span> 
 			<el-pagination background layout="prev, pager, next" :total="page.per_page" :page-size="page.size" @current-change="handleCurrentChange" :current-page.sync="page.currentPage"> 
 			</el-pagination>
		  </div>
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			return {
				tableData: [],
				token:"",
				keyword:'',
				page: {
					 total: 0,
					 size: 1, 
					 currentPage: 1,
					 num: 1 
					 },
			}
		},
		created(){
			this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
			this.getGoodsList();
		},
		methods:{
			getGoodsList(){
				axios.get('/api/order/getadminorderlist?action=complete&page='+ this.page.num +'&keyword='+this.keyword)
					.then(result => {
						if(result.data.code == 200){
							this.tableData = result.data.result;
							this.page.total = result.data.total; 
 							//this.page.size = 1;  
 							this.page.per_page = result.data.last_page;
						}
					})
					.catch(error => {

					})
			},
			 handerSearch(){
		    console.log(this.keyword,this.value);
		   	 this.getGoodsList();
		    },
		    handleCurrentChange(val) {
                this.page.num = val;
                this.getGoodsList();
            },
			delCate(row)
			{
				this.$confirm('如果删除这个类目他下面所有属性也会被删除', '确认信息', {
		          	distinguishCancelAndClose: true,
		          	confirmButtonText: '删除类目以及下面属性',
		          	cancelButtonText: '取消',
		          	type:"error"
		        })
		        .then(() => {
		            axios.post('/api/cates/del',{_token:this.token,id:row.id})
					.then(result => {
						console.log(result);
						if(result.data.code == 200){
							this.tableData = result.data.result;
						}
						this.getGoodsList();
					})
					.catch(error => {

					})

		        })
		        .catch(action => {
		            
		        });
			},
			handleEdit(index, row) {
		        console.log(index, row);
		        axios.get('/api/order/status?id='+row.id+"&type=1")
					.then(res => {
						this.$notify({
	    					type:"success",
	    					title:"状态更新成功",
	    					message:res.data.message
	    				})
	    				this.getGoodsList();
					})
		    },
		    handleDelete(index, row) {
		        console.log(index, row);
		        axios.get('/api/order/status?id='+row.id+"&type=2")
					.then(res => {
						this.$notify({
	    					type:"success",
	    					title:"状态更新成功",
	    					message:res.data.message
	    				})
	    				this.getGoodsList();
					})
		    },
		    addTime(m){
		    	return m<10?'0'+m:m 
		    },
			timeFormat(shijianchuo)
			{
				//shijianchuo是整数，否则要parseInt转换
				var time = new Date(shijianchuo);
				var y = time.getFullYear();
				var m = time.getMonth()+1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				return y+'-'+this.addTime(m)+'-'+this.addTime(d)+' '+this.addTime(h)+':'+this.addTime(mm)+':'+this.addTime(s);
			},
			updateStatus(){
				
			}
		}
	}
</script>

<style lang="scss">
  	.el-table .warning-row {
    	background: oldlace;
  	}
  	.el-select .el-input {
    	width: 120px;
  	}
  	.input-with-select .el-input-group__prepend {
    	background-color: #fff;
  	}
  	.el-table .success-row {
    	background: #f0f9eb;
  	}
  	.con{
	    .el-breadcrumb{
	      	height: 40px;
	    }
  	}
</style>
